<template>
  <div>
    <div style="margin-top: 15px; margin-bottom: 20px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form :inline="true" class="demo-form-inline" align="left">
            <el-form-item>
              <el-input v-model="obj.id" placeholder="根据id查询" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="obj.name" placeholder="根据名称查询" />
            </el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="search"
            ></el-button>
            <el-button type="success" @click="add">添加</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
     <el-table :data="tableData" style="width: 100%" max-height="100%">
      <el-table-column fixed prop="id" label="id" width="150">
      </el-table-column>
      <el-table-column prop="name" label="权限名称" width="120">
      </el-table-column>
      <el-table-column prop="link" label="权限操作" width="220">
      </el-table-column>
      <el-table-column prop="pid" label="pid" width="320">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="50">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="50"> 
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope)"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope)"
            type="danger"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加和修改公用的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="35%"
      center
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="权限名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限操作">
          <el-input v-model="form.link" ></el-input>
        </el-form-item>
        <el-form-item label="pid">
          <el-input v-model="form.pid"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.type" ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            style="display: block; margin-top: 9px"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="激活"
            inactive-text="禁用"
            active-value="Y"
            inactive-value="N"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 引入分页组件 -->
    <Pagenation style="margin-top: 20px" :total="pageInfo.total" :pageSize="pageInfo.pageSize"
     @changeSize="changeSize" @changePage="changePage"/>
  </div>
</template>

<script>
  import Pagenation from "../../components/pagenation/index.vue";
  export default {
    data() {
      return {
        obj: {
        id: "",
        name: "",
        },
        title: "",
        tableData: [],
        centerDialogVisible: false,
        //添加和修改存放数据的地方
        form: {
          id: 0,
           name: "",
          code: "",
          link: "",
          pid: "",
          type: "",
          status: "Y",
        },
        pageInfo:{
          currentPage:1,
          pageSize:10,
          total:0
        }
      };
    },
    components: { Pagenation },
    //生命周期的钩子函数，通常调用方法，来获取后台的数据
    created() {
      //在页面打开的时候，直接去调用方法，来获取页面初始列表数据
      this.iniPageData();
    },
    methods: {
      iniPageData() {
        this.$axios.post("/rbacPerm/"+this.pageInfo.currentPage+"/"+this.pageInfo.pageSize)
          .then((res) => {
            console.log(res);
            this.tableData = res.data.data.list;
            //重新赋值分页信息
            this.pageInfo.currentPage=res.data.data.pageNum,
            this.pageInfo.pageSize=res.data.data.pageSize,
            this.pageInfo.total=res.data.data.total
          })
          .catch();
      },
      deleteRow(scope) {
        console.log(scope.row);
        this.$axios
          .delete("/rbacPerm/" + scope.row.id)
          .then((res) => {
            if (res.data.code == 200) {
              this.$notify({
                title: "成功",
                message: res.data.msg,
                type: "success",
              });
              this.iniPageData();
            } else {
              this.$notify.error({
                title: "错误",
                message: "这是一条错误的提示消息",
              });
            }
          })
          .catch((err) => {
            //浏览器请求报错，后台响应状态码是200以外的
          });
        // rows.splice(index, 1);
      },
      //添加 并弹窗，同时还要赋值
      add() {
        this.title = "添加";
        //清空上次提交的数据
        this.form.id=0;
        this.form.name = "";
        this.form.code = "";
        this.form.link = "";
        this.form.pid = "";
        this.form.type = "";
        //显示弹窗
        this.centerDialogVisible = true;
      },
      //添加点击保存按钮后 发送请求到后台
      onSubmit() {
        //保存的时候 如何判断是添加还是修改？
        if (this.title == "添加") {
          this.$axios
            .post("/rbacPerm/", this.form)
            .then((res) => {
              console.log(res);
              if (res.data.code == 500) {
                this.$message.error(res.data.msg);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.iniPageData(); //重新初始化表单数据
                this.centerDialogVisible = false; //要隐藏弹窗
              }
            })
            .catch();
        } else {
          this.$axios
            .put("/rbacPerm/", this.form)
            .then((res) => {
              if (res.data.code == 500) {
                this.$message.error(res.data.msg);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.iniPageData(); //重新初始化表单数据
                this.centerDialogVisible = false; //要隐藏弹窗
              }
            })
            .catch();
        }
      },
      editRow(scope) {
        this.title = "修改";
        let rows = scope.row;
        this.form.id = rows.id;
        this.form.name = rows.name;
        this.form.code = rows.code;
        this.form.link = rows.link;
        this.form.pid = rows.pid;
        this.form.type = rows.type;
        this.form.status = rows.status;
        //让弹窗显示
        this.centerDialogVisible = true;
      },
      search() {
      this.$axios
        .post(
          "/rbacPerm/" +
            this.pageInfo.currentPage +
            "/" +
            this.pageInfo.pageSize,this.obj
        )
        .then((res) => {
          console.log(res);

          this.tableData = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        })
        .catch();
    },//交换每页显示多少条
      changeSize(val){
          this.pageInfo.pageSize=val;
          this.iniPageData();
      },
      //交换当前页码
      changePage(val){
          this.pageInfo.currentPage=val;
          this.iniPageData();
      }
    },
  };
</script>